<template>
  <div style="background-color: #eee">
    <div class="header mt-1 bg-white p-3">
      <span class="p-1 text-slate-300">首页</span>/<span class="pl-2"
        >子公司管理</span
      >
      <h3 class="font-bold text-xl">子公司管理</h3>
    </div>
    <div>
      <n-button
        type="info"
        size="medium"
        class="ml-auto mt-2"
        @click="AddNewUser"
        >+ 添加子公司</n-button
      >
    </div>
    <div>
      <n-data-table
        :columns="columns"
        :data="data"
        :pagination="pagination"
        :bordered="false"
      />
    </div>
    <div class="flex justify-end">
      <n-pagination
        v-model:page="page"
        :page-count="totalpage"
        @update:page="changepage"
      />
    </div>
    <AddUser
      v-if="showModal"
      :showModal="showModal"
      @CheckShowModal="CheckShowModal"
    ></AddUser>
    <EditUser
      v-if="showEditModal"
      :showModal="showEditModal"
      :userId="userId"
      @CheckShowModal="CheckEditShowModal"
    ></EditUser>
    <DeleteUser
      v-if="showDelModal"
      :userId="userId"
      :showModal="showDelModal"
      @CheckShowModal="CheckShowModal"
    ></DeleteUser>
    <AddGoods
      v-if="showGoodsModal"
      :userId="userId"
      :childName="childName"
      :showModal="showGoodsModal"
      @CheckShowModal="CheckGoodsShowModal"
    ></AddGoods>
  </div>
</template>

<script lang="ts" setup>
import { h, ref, reactive } from "vue";
import { NButton, NImage, useMessage } from "naive-ui";
import type { DataTableColumns } from "naive-ui";
import AddUser from "./comp/AddUser.vue";
import EditUser from "./comp/EditUser.vue";
import DeleteUser from "./comp/DeleteUser.vue";
import AddGoods from "./comp/AddGoods.vue";
import { getChildren } from "@/api/children";
import router from "@/router";
type Song = {
  scName: String;
  scMan: String;
  scTel: String;
  scWebUrl: String;
  uId: String;
  file: String;
  scId: number;
};
const page = ref(1);
const totalpage = ref(0);
const userId = ref(0);
const childName:any=ref(null)
const showModal = ref(false);
const showDelModal = ref(false);
const showEditModal = ref(false);
const showGoodsModal = ref(false);
const message = useMessage();
const createColumns = ({
  play,
}: {
  play: (row: Song) => void;
}): DataTableColumns<Song> => {
  return [
    {
      title: "公司ID",
      key: "scId",
    },
    {
      title: "公司名称",
      key: "scName",
    },
    {
      title: "公司负责人",
      key: "scMan",
    },
    {
      title: "负责人电话",
      key: "scTel",
    },
    {
      title: "公司管理员",
      key: "uName",
    },
    {
      title: "公司Logo",
      key: "scLogo",
      render(row: any) {
        return h(NImage, {
          src: `http://gy01.52lamp.online/api/upload/${row?.scLogo}`,
          width: 50,
          fallbackSrc:
            "https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg",
        });
      },
    },
    {
      title: "操作",
      key: "actions",
      render(row) {
        return [
          h(
            NButton,
            {
              strong: true,
              tertiary: true,
              size: "small",
              onClick: () => {
                userId.value = row.scId;
                showEditModal.value = true;
              },
            },
            { default: () => "修改" }
          ),
          h(
            NButton,
            {
              strong: true,
              tertiary: true,
              size: "small",
              type: "error",
              onClick: () => {
                userId.value = row.scId;
                showDelModal.value = true;
              },
            },
            { default: () => "删除" }
          ),
          h(
            NButton,
            {
              strong: true,
              tertiary: true,
              size: "small",
              type: "success",
              onClick: () => {
                userId.value = row.scId;
                childName.value=row.scName
                showGoodsModal.value = true;
              },
            },
            { default: () => "添加商品" }
          ),
          h(
            NButton,
            {
              strong: true,
              tertiary: true,
              size: "small",
              type: "success",
              onClick: () => {
                router.push({ path:"/SubsidiaryManagement/goodslist",query:{id:row.scId}});
              },
            },
            { default: () => "商品详情" }
          ),
        ];
      },
    },
  ];
};

const data: any = ref();
const columns = createColumns({
  play(row: Song) {
    message.info(`Play ${row.scName}`);
  },
});
const params = reactive({
  page: 1,
});
const init = () => {
  getChildren().then((res: any) => {
    // console.log(res)
    data.value = res.data.data;
    totalpage.value = res.data.totalPage;
  });
};
init();
const pagination = false;
const AddNewUser = () => {
  showModal.value = true;
};
const CheckShowModal = (val: any) => {
  showModal.value = val;
  showDelModal.value = val;
  init();
};
const CheckGoodsShowModal = (val: any) => {
  showGoodsModal.value = val;
  init();
};
const CheckEditShowModal = (val: any) => {
  showEditModal.value = val;
  init();
};

const changepage = (val: number) => {
  params.page = val;
  getChildren().then((res: any) => {
    data.value = res.data.data;
  });
};
</script>

<style scoped lang="scss">
div {
  margin-top: 1vh;
}
::v-deep(.n-data-table .n-data-table-th) {
  text-align: center;
}
::v-deep(.n-data-table .n-data-table-td) {
  text-align: center;
}
</style>
